<template>
  <div class="my-message-card">
    <van-swipe-cell
    left-width="0"
    right-width="60"
    >
      <van-row class="message-preview" fixed align="center" justify="center">
        <van-col span="6">
          <van-image round height="55" width="55" :src="image" />
        </van-col>
        <van-col span="14" class="message-content-preview">
          <div>
            <strong>{{friendname}}</strong>
          </div>
          <div>{{message}}</div>
        </van-col>
        <van-col span="4" class="message-content-time">{{time}}</van-col>
      </van-row>

      <template #right>
        <van-button square type="danger" text="删除" class="delete-button" />
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
export default {
  name: 'myMessageCard',
  props: ['image', 'friendname', 'message', 'time'],
  data() {
    return {}
  },
  methods: {},
  computed: {}
}
</script>
<style scoped>
.my-message-card {
  /* padding: 5px;
  box-shadow: 0 8px 12px #ebedf0; */
  background-color: #fff;
}
.message-preview {
  margin-top: 10px;
  height: 60px;
}
.message-content-preview {
  text-align: left;
}
.message-content-preview > div {
  margin: 5px auto;
}
.message-content-preview > div:first-child {
  font-size: 16px;
}
.message-content-time {
  margin-top: 5px;
  font-size: 10px;
}
</style>
